<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	#app{
		display: flex;
	}
	.name{
		width: 60px;
		height: 60px;
		line-height: 50px;
		border: 1px solid red;
		text-align: center;
		border-radius: 50%;
		margin: 0 10px;
	}
</style>
<body>
	<div id="app">
		<q-name  title="苹果" :a="num" :color="'lightgreen'"></q-name>

		<q-name title="香蕉" :a="num" :color="'red'"></q-name>
		<q-name title="桃子" :a="num" :color="'yellow'"></q-name>
		<q-name title="葡萄" :a="num" :color="'lightblue'"></q-name>
		<q-name title="梨" :a="num" :color="'orange'"></q-name>
		<button @click="num++">点击变色</button>
	</div>
</body>
<script src="./vue.js"></script>
<script>
	const {ref,createApp,computed} =Vue;
	const app=createApp({
		setup(){
			let num =ref(1)
			return{
				num
			}
		}
	})
	app.component('q-name',{
		// props:['a','title'],
		// props:{
		// 	a:[Number,String],
		// 	title:String
		// },
		props:{
			a:{
				type:[Number,String],
				required:false,
				default:666,
				validator(val){
					console.log(val)
					if(val%2===0){
						return true
					}else{
						return false
					}
				}
			},
			title:String,
			color: String
		},
		setup(props){
			let title = props.title;
			let a=computed(function(){
				return props.a
			})
			const even = computed(function () {
                return props.a % 2 === 0;
            });
            const backgroundColor = computed(function () {
                return even.value? props.color : '';
            });
			return{
				title,
				a,
				backgroundColor
			}
		},
		template:`
		
		<div class="name" :style="{ backgroundColor: backgroundColor}">
			
			{{title}}</div>`
	});
	app.mount('#app')
</script>
</html>